<template>
  <div class="tableChild-container">
    <!--    <div class="columnset-con">
      <el-dropdown :hide-on-click="false">
        <span class="el-dropdown-link">
          标题设置
          <i class="el-icon-arrow-down el-icon&#45;&#45;right" />
        </span>

        <el-dropdown-menu slot="dropdown">
          <el-checkbox-group v-model="checkboxarr">
            <el-tooltip class="item" effect="dark" content="鼠标点击标题拖动可以调整标题显示顺序" placement="left">
              <el-scrollbar class="dropdown-scrollbar">
                <draggable :list="tablecolumn" :animation="340" group="column" @end="onEnd">
                  <div v-for="item in tablecolumn" :key="item.prop" class="column-item">
                    <el-dropdown-item>
                      <el-checkbox :label="item.prop">{{ item.label }}</el-checkbox>
                    </el-dropdown-item>
                  </div>
                  <el-dropdown-item style="text-align:center;">
                    <el-button size="mini" @click="save()">保存</el-button>
                  </el-dropdown-item>
                </draggable>
              </el-scrollbar>
            </el-tooltip>
          </el-checkbox-group>
        </el-dropdown-menu>
      </el-dropdown>
    </div>-->

    <el-table
      :key="key"
      v-loading="listLoading"
      :data="list"
      border
      fit
      row-key="id"
      class="table"
      style="width: 100%"
      :height="height"
      @selection-change="handleSelectionChange"
      @header-dragend="handleHeaderDrag"
    >
      <!--      第二级-->
      <el-table-column v-if="isChild" type="expand">
        <template slot-scope="props">
          <el-table tooltip-effect="dark" :data="props.row.subjectVOList" style="width: 100%;padding-left: 80px;">
            <!--第三级-->
            <el-table-column type="expand">
              <template slot-scope="propsChildren">
                <el-table tooltip-effect="dark" :data="propsChildren.row.children" style="width: 100%;padding-left: 80px;">
                  <el-table-column label="课件封面" width="100">
                    <template slot-scope="scope">
                      <el-image :src="scope.row.subjectImgUrl" :preview-src-list="[scope.row.subjectImgUrl]">
                        <div slot="error" class="image-slot">
                          <i class="el-icon-picture-outline" />
                        </div>
                      </el-image>
                    </template>
                  </el-table-column>
                  <el-table-column prop="subjectName" label="课件名称" width="180" />
                  <el-table-column width="100" prop="subjectTypeValue" label="课件类型" />
                  <el-table-column :show-overflow-tooltip="true" prop="subjectIntroduce" label="简介" />
                  <el-table-column fixed="right" label="操作" width="70" align="center">
                    <template slot-scope="scope">
                      <el-button type="text" size="mini" @click="handleSelect(scope.row, props.row)">选择</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column label="章节封面" width="100">
              <template slot-scope="scope">
                <el-image :src="scope.row.subjectImgUrl" :preview-src-list="[scope.row.subjectImgUrl]">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column prop="subjectName" label="章节名称" width="180" />
            <el-table-column :show-overflow-tooltip="true" prop="subjectIntroduce" label="章节简介" />
            <el-table-column :show-overflow-tooltip="true" prop="subjectNum" label="课件数量" />
            <el-table-column fixed="right" label="操作" width="70" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="handleSelect(scope.row, props.row)">选择</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column v-if="selection" type="selection" align="center" min-width="50" :reserve-selection="true" />
      <el-table-column
        v-for="item in column"
        :key="item"
        :label="getLabel(item)"
        :prop="item"
        show-overflow-tooltip
        :align="getAlign(item)"
        header-align="center"
        :width="getWidth(item)"
      >
        <template slot-scope="scope">
          <template v-if="sourceArr.indexOf(item) > -1">
            <el-image :src="filterColumn(scope, item)" :preview-src-list="[filterColumn(scope, item)]">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline" />
              </div>
            </el-image>
          </template>
          <template v-else-if="hoverArr.indexOf(item) > -1">
            <el-tooltip
              v-if="scope.row.balance || scope.row.balance === 0"
              class="item"
              effect="dark"
              :content="'截止：' + scope.row.updateTime + '时余额为：' + scope.row.balance"
              placement="top"
            >
              <div>
                <span>{{ scope.row.balance || 0 }}</span>
              </div>
            </el-tooltip>
            <span v-else />
          </template>
          <template v-else>
            <template v-if="cellStyle">
              <span :style="cellStyle(scope, item)">
                <template v-if="filterColumn">
                  <span v-html="filterColumn(scope, item)" />
                </template>
                <template v-else>{{ scope.row[item] }}</template>
              </span>
            </template>
            <template v-else>
              <template v-if="filterColumn">{{ filterColumn(scope, item) }}</template>
              <template v-else>{{ scope.row[item] }}</template>
            </template>
          </template>
        </template>
      </el-table-column>
      <slot />
    </el-table>
  </div>
</template>
<script>
import { query, update } from './api'
import draggable from 'vuedraggable'
export default {
  name: 'TableChild',
  components: {
    draggable
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    isChild: {
      type: Boolean,
      default: false
    },
    listLoading: {
      type: Boolean,
      default: false
    },
    filterColumn: {
      type: Function,
      default: null
    },
    operationwidth: {
      type: String,
      default: ''
    },
    tag: {
      type: String,
      default: ''
    },
    selection: {
      type: Boolean,
      default: false
    },
    cellStyle: {
      type: Function,
      default: null
    },
    cellSource: {
      type: Function,
      default: null
    },
    sourceArr: {
      type: Array,
      default: () => []
    },
    hoverArr: {
      type: Array,
      default: () => []
    },
    height: {
      type: [Number, undefined],
      default: undefined
    }
  },
  data() {
    return {
      key: 1,
      checkboxarr: [],
      column: [],
      tablecolumn: []
    }
  },
  watch: {
    tag(newvalue) {
      if (newvalue) {
        this.queryColumn()
      }
    },
    checkboxarr(arr) {
      const a = this.tablecolumn.filter((i) => arr.indexOf(i.prop) >= 0)
      const b = []
      a.forEach((item) => {
        b.push(item.prop)
      })
      this.column = Object.assign([], b)
      this.key = this.key + 1 // 为了保证table 每次都会重渲
    }
  },
  created() {
    this.queryColumn()
  },
  methods: {
    handleSelect(info, row) {
      info.courseCover = row.courseImg
      this.$emit('selectSub', info)
    },
    queryColumn() {
      console.log('私有')
      return new Promise((resolve, reject) => {
        query({
          pageFlag: this.tag
        })
          .then((res) => {
            let commonarr = ''
            let personnalarr = ''
            const common = (res.data.data.common && res.data.data.common.jsonData) || ''
            const personnal = (res.data.data.personnal && res.data.data.personnal.jsonData) || ''

            commonarr = common ? JSON.parse(common) : []
            personnalarr = personnal ? JSON.parse(personnal) : []
            if (personnalarr && personnalarr.length > 0) {
              this.tablecolumn = Object.assign([], personnalarr)
            } else if (commonarr && commonarr.length > 0) {
              this.tablecolumn = Object.assign([], commonarr)
            }
            if (personnalarr && personnalarr.length > 0) {
              personnalarr.forEach((item) => {
                if (item.isShow) {
                  this.checkboxarr.push(item.prop)
                }
              })
            } else {
              commonarr.forEach((item) => {
                if (item.isShow) {
                  this.checkboxarr.push(item.prop)
                }
              })
            }
          })
          .catch((error) => {
            reject(error)
          })
      })
    },
    save() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      this.tablecolumn.forEach((item) => {
        if (this.checkboxarr.indexOf(item.prop) >= 0) {
          item.isShow = true
        } else {
          item.isShow = false
        }
      })
      const a = Object.assign([], this.tablecolumn)
      const jsonData = JSON.stringify(a)
      return new Promise((resolve, reject) => {
        update({
          pageFlag: this.tag,
          jsonData: jsonData
        })
          .then((res) => {
            loading.close()
            this.$message({
              message: '保存成功！',
              type: 'success'
            })
          })
          .catch((error) => {
            loading.close()
            reject(error)
          })
      })
    },
    handleSelectionChange(arr) {
      this.$emit('handleSelectionChange', arr)
    },
    handleHeaderDrag(newWidth, oldWidth, column) {
      const index = this.tablecolumn.findIndex((item) => {
        return item.prop === column.property
      })
      this.$set(this.tablecolumn[index], 'width', newWidth)
    },
    onEnd() {
      const a = this.tablecolumn.filter((i) => this.checkboxarr.indexOf(i.prop) >= 0)
      const b = []
      a.forEach((item) => {
        b.push(item.prop)
      })
      this.column = Object.assign([], b)
      this.key = this.key + 1 // 为了保证table 每次都会重渲
    },

    getLabel(prop) {
      return this.tablecolumn.find((item) => item.prop === prop) ? this.tablecolumn.find((item) => item.prop === prop).label : ''
    },
    getAlign(prop) {
      return this.tablecolumn.find((item) => item.prop === prop) && this.tablecolumn.find((item) => item.prop === prop).align
        ? this.tablecolumn.find((item) => item.prop === prop).align
        : 'center'
    },

    getWidth(prop) {
      return this.tablecolumn.find((item) => item.prop === prop) && this.tablecolumn.find((item) => item.prop === prop).width
        ? this.tablecolumn.find((item) => item.prop === prop).width
        : 'center'
    }
  }
}
</script>
<style lang="scss">
.tableChild-container {
  position: relative;
  padding-top: 16px;

  .columnset-con {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 99;

    .el-dropdown-link {
      cursor: pointer;
      @include font-color($mainColor);
    }

    .el-icon-arrow-down {
      font-size: 12px;
    }
  }

  .table {
    .el-image {
      width: 50px;
      height: 50px;
    }
  }
}

.dropdown-scrollbar {
  overflow: hidden;

  .checkbox-group {
    height: 100%;
  }

  .el-scrollbar__wrap {
    max-height: 400px;
    margin-bottom: 0 !important;
    overflow-x: hidden;
  }

  .el-scrollbar__view {
    overflow-x: hidden;
  }
}
</style>
